<template>
  <div class="sign_in">
    <div class="sign_in_bf" :class="{'big_card_1': id ===1,
                'big_card_2': id ===2,'big_card_3': id ===3,
                'big_card_4': id === 4,'big_card_5': id ===5}">
      <div class="sign_in_bf_text fs-14">
        参与成功！收下这份见面礼，快去请求帮助收集更多卡片，赢取五一劳模大奖吧！
      </div>
    </div>
    <div class="sign_in_btn">
      <button @click="handleCloseSingIn" class="btn-big btn-big-ty1" >知道了</button>
    </div>
  </div>
</template>
<script>
export default {
  props: ['id'],
  methods: {
    handleCloseSingIn() {
      this.$emit('handleCloseSingIn');
    },
  },
};
</script>
<style lang="less">
.sign_in{
  position: fixed;
  left: calc((~"100% - 2.95rem")/2);
  z-index: 4;
  top: 0.38rem;
  color: #ffffff;
  .sign_in_bf{
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 3.78rem;
    width: 2.95rem;
    position: relative;
    .sign_in_bf_text{
      position: absolute;
      top: 2.3rem;
      width: 80%;
      left: 10%;
    }
  }
  .big_card_1{
    background-image: url('../../../assets/image/big_card_1.png')
  }
  .big_card_2{
    background-image: url('../../../assets/image/big_card_2.png')
  }
  .big_card_3{
    background-image: url('../../../assets/image/big_card_3.png')
  }
  .big_card_4{
    background-image: url('../../../assets/image/big_card_4.png')
  }
  .big_card_5{
    background-image: url('../../../assets/image/big_card_5.png')
  }
  .sign_in_btn{
      margin-top:0.36rem;
    }
}
</style>
